<template>
    <div>
        <div>
            <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="main">
            <van-checkbox-group v-model="result" ref="checkBox" shape="square">
                <van-swipe-cell v-for="value in list" :key="value.item_id">

                    <van-card num="2" :title="value.foodname" :thumb="getImg(value.pic)">
                        <template #num>
                            <van-button icon="minus" type="primary" size="mini" @click="minus(value.item_id)" />
                            <span class="sum">{{ value.num }}</span>
                            <van-button icon="plus" type="primary" size="mini" @click="add(value.item_id)" />
                        </template>
                        <template #price-top>
                            <div class="van-card__price">
                                <div>
                                    <span class="van-card__price-currency">¥</span>
                                    <span class="van-card__price-integer">{{ value.price }}</span>
                                </div>
                                <van-checkbox :name="value.item_id"></van-checkbox>
                            </div>

                        </template>
                    </van-card>

                    <template #right>
                        <van-button square text="删除" type="danger" style="height: 100%;"
                            @click="onDelete(value.item_id)" />
                    </template>
                </van-swipe-cell>
            </van-checkbox-group>
        </div>
        <div class="footer">
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked" @change="onChange">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                </template>
            </van-submit-bar>
        </div>
    </div>

</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getCartApi, deleteCartApi } from '@/api';
import { useCounterStore } from '@/stores/counter';
const router = useRouter();
const store = useCounterStore();
const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
const list = ref([]);
const result = ref([]);
const checkBox = ref(null);
const checked = ref(false);
const getCart = async e => {
    const res = await getCartApi(e);
    list.value.push(...res)
};
const deleteCart = async e => {
    const res = await deleteCartApi(e);
    if (res.success === '0') {
        alert('删除失败')
    }
    if (res.success === '1') {
        alert('删除成功')
    }
};
const add = e => {
    list.value[list.value.findIndex(obj => obj.item_id === e)].num++
};
const minus = e => {
    if (list.value[list.value.findIndex(obj => obj.item_id === e)].num > 1) {
        list.value[list.value.findIndex(obj => obj.item_id === e)].num--
    }
};
const onDelete = e => {
    deleteCart(e);
    list.value.splice(list.value.findIndex(obj => obj.item_id === e), 1)
};
const onChange = (e) => {
    if (e === true) {
        checkBox.value.toggleAll(true);
    }
    if (e === false) {
        checkBox.value.toggleAll(false);
    }
};
const totalPrice = computed(() => {
    let sum = 0;
    if (result.value.length >= 1) {
        list.value.forEach((v, i) => {
            result.value.forEach(item => {
                if (v['item_id'] === item) {
                    sum += list.value[i].price * list.value[i].num * 100;
                }
            });
        });
        return sum;
    }
    else {
        return sum = 0;
    }
});
const onSubmit = () => {
    router.push({
        path: '/buy2',
        query: {
            sum: totalPrice.value / 100,
            itemId: result.value.join(',')
        }
    });
};
const onClickLeft = () => {
    router.push('/')
};
onMounted(() => {
    getCart(store.userId);
});
</script>

<style scoped>
.main {
    padding-bottom: 20px;
}

:deep(.van-card__header) {
    display: flex;
    align-items: center;
}

.van-checkbox {
    justify-content: flex-end;
}

.van-button {
    margin-top: 5px;
}

:deep(.van-card__num) {
    display: flex;
    align-items: center;

}
:deep(.van-card__price) {
    display: flex;
    justify-content: space-between;
}
.sum {
    font-size: 16px;
    color: #000;
}
:deep(.van-card__title) {
    font-size: 16px;
}
</style>